<template>
  <div class="vm">
    <div id="map" class="map-x" ref="map"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ"; // 引入XYZ地图格式
import { TileArcGISRest } from "ol/source";
import TileGrid from "ol/tilegrid/TileGrid";

export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      let tileGrid = new TileGrid({
        // extent: [
        //   -2.0037507067161843E7, -1.819812769412998E7, 2.0037507067161843E7,
        //   2.8686510967305996E7
        // ],
        extent: [
          -2.0038038342787e7, -1.819812769412998E7, 2.0037832342787e7,
          2.8686510967305996E7
        ],
        // origin: [-2.0037508342787e7, 2.0037508342787e7],
        origin: [-2.0038038342787e7, 2.0037832342787e7],
        tileSize: [256, 256],
        resolutions: [
          156543.03392800014, 78271.51696399994, 39135.75848200009,
          19567.87924099992, 9783.93962049996, 4891.96981024998,
          2445.98490512499, 1222.992452562495, 611.4962262813797,
          305.74811314055756, 152.87405657041106, 76.43702828507324,
          38.21851414253662, 19.10925707126831, 9.554628535634155,
          4.77731426794937, 2.388657133974685, 1.1943285668550503,
          0.5971642835598172,0.29858214164761665
        ],
      });

      // 实例化地图
      this.map = new Map({
        target: this.$refs.map,
        layers: [
          // 加载arcgis 3857坐标系标准切片服务
          new Tile({
            name: "defaultLayer",
            id: "defaultLayerID",
            source: new XYZ({
              url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
          // 对切片服务进行校正
          // new Tile({
          //   extent: [-2.0037507067161843E7,-3.0240971958386254E7,2.0037507067161843E7,3.0240971958386205E7],
          //   source: new TileArcGISRest({
          //     // hidpi: false,
          //     // params: {
          //     //   dpi: "96"
          //     // },
          //     // tileGrid: tileGrid,
          //     url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
          //   }),
          //   opacity: 0.8,
          // }),
          // 加载arcgis 离线切片
          new Tile({
            name: "offlineTiles",
            id: "offlineTilesID",
            source: new XYZ({
              url: "https://andirrigated.oss-cn-hangzhou.aliyuncs.com/largeMap/{z}/{y}/{x}",
            }),
              projection: "EPSG:4326", 
          }),
          // 加载其他坐标系ArcGIS服务
          new Tile({
            // extent: [-2.0037507067161843E7,-3.0240971958386254E7,2.0037507067161843E7,3.0240971958386205E7],
            source: new TileArcGISRest({
              url: "http://112.17.127.75:8008/arcgis/rest/services/andi/andi_uav_test/MapServer",
            }),
          }),
         
        ],
        view: new View({
          projection: "EPSG:4326", 
          center: [119.634072, 29.031330],
          zoom: 16,
          minZoom: 3,
        }),
      });

    },
    
  },
  mounted() {
    this.initMap();
    // 遍历查找图层
    this.map.getLayers().forEach((element) => {
      if (element.get("id") == "defaultLayerID") {
        console.log(element, "============element==============");
      }
    });
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/varibles.scss";
.popup {
  // visibility: hidden;
  width: 600px;
  height: 400px;
  background: #fff;
  position: relative;
  top: -410px;
  left: -300px;
  box-sizing: border-box;
  padding: 10px;
  background-color: $acticeBacgroundColor;
  color: #fff;

  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    background: $acticeBacgroundColor;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }

  .icon-close {
    position: absolute;
    top: 0px;
    right: 8px;
  }

  .content {
    margin-top: 14px;
  }
}
</style>